<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>注册</title>

    <%@include file="/WEB-INF/views/commons/commons.jsp" %>

    <style>
        * {
            padding: 0;
            margin: 0;

            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: black;
        }

        body {

            width: 100%;
            height: 100%;
            background: url("/static/images/bg.jpg") no-repeat;

            background-size: cover;
            text-align: center;

        }

        /*面板*/
        #panel {
            width: 600px;
            height: 600px;

            /*重写*/
            text-align: left;
            border-radius: 5px;
            box-shadow: -10px 20px 100px black;
            /*定位*/
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .panel-header {
            width: 100%;
            height: 64px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 5px 5px 0 0;
            line-height: 64px;

            text-align: center;
            margin-bottom: 10px;
            cursor: move;

        }

        .panel-header h2 {
            color: rgba(255, 255, 255, 0.5);
        }

        input {
            width: 300px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.5);

        }

        div {
            font-size: 15px;
        }

        #emp_form {

            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /*  #emp_form  div{

              width: 100px;
              height: 50px;
          }*/
    </style>
</head>
<body>


<!--面板-->
<div id="panel">
    <div class="panel-header" id="panel_header">
        <h2>员工注册</h2>
    </div>
    <form id="emp_form" method="post">

        <p id="msg_user" style="color:red ;display:none">
        </p>
        <input name="admin" type="hidden" value="0">

        <table align="center" style="font-size: 15px; width:400px;">
            <tr>
                <td>
                    <div>账号</div>
                </td>
                <td coldiv="2">

                    <input name="username" type="text" prompt="请输入用户名" style="width:300px;
          height:50px; background-color: rgba(255,255,255,0.5);
           ">
                </td>
            </tr>

            <tr>
                <td>
                    <div>真名</div>
                </td>
                <td coldiv="2"><input name="realname" data-options="required:true" style="width:300px;
          height:50px; background-color: rgba(255,255,255,0.5);
          ">
                </td>
            </tr>

            <tr>
                <td>
                    <div>密码</div>
                </td>
                <td coldiv="2">
                    <input id="pwd" name="password" type="password" class="easyui-validatebox"
                           data-options="required:true" style="margin:0; " missingMessage="请填写新密码"/>

                </td>
            </tr>

            <tr>
                <td>
                    <div>确认密码</div>
                </td>
                <td coldiv="2">
                    <input id="rpwd" name="rpassword" type="password" class="easyui-validatebox"
                           required="required" missingMessage="请再次填写新密码" validType="eqPassword['#pwd']"/>

                </td>
            </tr>
            <tr>
                <td>
                    <div>电话</div>
                </td>
                <td coldiv="2"><input name="tel" style="width:300px;
          height:50px;background: rgba(255,255,255,0.5);
       ">
                </td>
            </tr>

            <tr>
                <td>
                    <div>邮箱</div>
                </td>
                <td coldiv="2"><input name="email" data-options="validType:'email'" style="width:300px;
          height:50px; background-color: rgba(255,255,255,0.5);
          ">
                </td>
            </tr>


        </table>
        <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:370px;
          height:50px;  background-color:rgba(255,255,255,0.5);
          ">注冊</a>
    </form>

</div>

<script>
    $(function () {

        $.extend($.fn.validatebox.defaults.rules, {
            eqPassword: {
                validator: function (value, param) {
                    /*console.log(value, param)*/
                    return value == $(param[0]).val();
                },
                message: '密码不一致！'
            }
        });
        $("#btn").click(function () {

            var url = "/employee/register";


            $("#emp_form").form('submit', {
                url: url,

                success: function (data) {
                    data = $.parseJSON(data);
                    if (!data.success) {
                        $("#msg_user").show().text(data.errorMsg);


                    } else {
                        $("#msg_user").show().text("注冊成功等待管理員分配权限!!");
                        $("#msg_user").click(function () {
                            window.location.href="/login"
                        })
                    }
                }
            })
        });
        $("[name=username]").focus(function () {
            $("#msg_user").hide()
        })
    });

    //1.找对象
    var panel = document.getElementById('panel');
    var panel_header = document.getElementById('panel_header');

    //2.在panel_header上添加鼠标按下事件
    panel_header.onmousedown = function (event) {
        //3.获取一个兼容的event
        var myEvent = event || window.event;
        //4.获取到初始的位置
        var beginX = myEvent.clientX - panel.offsetLeft;
        var beginY = myEvent.clientY - panel.offsetTop;

        //5.在文档区域上添加鼠标拖动事件

        document.onmousemove = function (event) {
            //6.获取一个兼容的event
            var myEvent = event || window.event;

            //7.获取最新的位置
            var endX = myEvent.clientX - beginX;
            var endY = myEvent.clientY - beginY;

            //8.走起来
            panel.style.left = endX + 'px';
            panel.style.top = endY + 'px';

            //10.防止拖动
            return false;
        }
        //9.当鼠标在文档区域抬起的时候,清掉之前的事件
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
        //防止拖动
        return false;
    }
</script>
</body>
</html>